<template>
	<view class="recommend">
		<view class="swiper">
			<swiper autoplay="true" circular="true" current="currentIndex" @change="changeCurrent">
				<swiper-item  v-for="(item, index) in imgUrl" :key="index">
					<image :src="item" class="swiper-bg" />
				</swiper-item>
			</swiper>
			<view class="indicator">
				<view class="indicators" v-for="(item, index) in imgUrl" :key="index" :class="index == currentIndex ? 'indicatorsColor' : ''"></view>
			</view>
		</view>
		<view class="dynamic">
			<view class="dynamics">
				<view class="dynamics-top">
					<view class="user">
						<view class="head-portrait">
							<image :src="user.MZC.person.headPortrait" class="head-portraits"/>
						</view>
						<view class="qita">
							<view class="username">{{user.MZC.person.userName}}</view>
							<view class="data">10月1日&nbsp星期四</view>
						</view>
					</view>
					<view class="more" @click="clickMore(1)">
						<view class="mores"></view>
						<view class="mores"></view>
						<view class="mores"></view>
						<view class="more-mores" v-show="mores == 1">
							<view class="more-mores-span" style="color:orange ;" @click="clickFollow">关注</view>
							<view class="more-mores-span" style="color: #fff;">转发</view>
							<view class="more-mores-span" style="color: red;">举报</view>
							<view class="iconfont iconright"></view>
						</view>
					</view>
				</view>
				<view class="dynamic-content">
					<view class="dynamic-contents">{{user.MZC.dynamics.content}}</view>
					<view class="dynamic-contentImg">
						<view class="dynamic-contentImgs">
							<image :src="user.MZC.dynamics.imgUrl" class="dynamic-contentImage1" />
						</view>
						<view class="dynamic-contentImgs">
							<image :src="user.MZC.dynamics.imgUrl" class="dynamic-contentImage1" />
						</view>
					</view>
					<view class="dynamic-contentLabel">
						<view class="dynamic-contentLabels">
							<text class="ctrl3">#</text>
							<text>{{user.MZC.dynamics.label}}</text>
							<text class="ctrl3">#</text>
						</view>
					</view>
				</view>
				<view class="dynamic-bottom">
					<view class="browse">
						<view class="iconfont iconzhengyanyanjing"></view>
						<text class="comments">{{user.MZC.dynamics.browse}}</text>
					</view>
					<view class="dynamic-bottom-right">
						<view class="comment">
							<view class="iconfont iconpinglun"></view>
							<text class="commentss">{{user.MZC.dynamics.comment}}</text>
						</view>
						<view class="fabulous">
							<view class="iconfont iconzan-copy" :style="cFabulous ? 'color: #FE6440;' : ''" @click="clickFabulous1"></view>
							<text class="comments" :style="cFabulous ? 'color: #FE6440;' : ''">{{user.MZC.dynamics.fabulous}}</text>
						</view>
					</view>
				</view>
			</view>
<!-- 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 -->
			<view class="dynamics">
				<view class="dynamics-top">
					<view class="user">
						<view class="head-portrait">
							<image :src="user.WS.person.headPortrait" class="head-portraits"/>
						</view>
						<view class="qita">
							<view class="username">{{user.WS.person.userName}}</view>
							<view class="data">10月1日&nbsp星期四</view>
						</view>
					</view>
					<view class="more" @click="clickMore(2)">
						<view class="mores"></view>
						<view class="mores"></view>
						<view class="mores"></view>
						<view class="more-mores" v-show="mores == 2">
							<view class="more-mores-span" style="color:orange ;" @click="clickFollow">关注</view>
							<view class="more-mores-span" style="color: #fff;">转发</view>
							<view class="more-mores-span" style="color: red;">举报</view>
							<view class="iconfont iconright"></view>
						</view>
					</view>
				</view>
				<view class="dynamic-content">
					<view class="dynamic-contents">{{user.WS.dynamics.content}}</view>
					<view class="dynamic-contentImg">
						<view class="dynamic-contentImgs">
							<image :src="user.WS.dynamics.imgUrl[0]" :class="user.WS.dynamics.imgUrl.length < 3 ? 'dynamic-contentImage1' : 'dynamic-contentImage2'" />
						</view>
						<view class="dynamic-contentImgs">
							<image :src="user.WS.dynamics.imgUrl[1]" :class="user.WS.dynamics.imgUrl.length < 3 ? 'dynamic-contentImage1' : 'dynamic-contentImage2'" />
						</view>
						<view class="dynamic-contentImgs">
							<image :src="user.WS.dynamics.imgUrl[2]" :class="user.WS.dynamics.imgUrl.length < 3 ? 'dynamic-contentImage1' : 'dynamic-contentImage2'" />
						</view>
					</view>
					<view class="dynamic-contentLabel">
						<view class="dynamic-contentLabels">
							<text class="ctrl3">#</text>
							<text>{{user.WS.dynamics.label}}</text>
							<text class="ctrl3">#</text>
						</view>
					</view>
				</view>
				<view class="dynamic-bottom">
					<view class="browse">
						<view class="iconfont iconzhengyanyanjing"></view>
						<text class="comments">{{user.WS.dynamics.browse}}</text>
					</view>
					<view class="dynamic-bottom-right">
						<view class="comment">
							<view class="iconfont iconpinglun"></view>
							<text class="commentss">{{user.WS.dynamics.comment}}</text>
						</view>
						<view class="fabulous">
							<view class="iconfont iconzan-copy" :style="sFabulous ? 'color: #FE6440;' : ''" @click="clickFabulous2"></view>
							<text class="comments" :style="sFabulous ? 'color: #FE6440;' : ''">{{user.WS.dynamics.fabulous}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>	
    </view>
</template>

<script>
export default{
	name: 'homeRecommend',
	data() {
		return {
			imgUrl: ['../../../static/img/recommend/ytsq.png',
					'../../../static/img/recommend/redmik30.png',
					'../../../static/img/recommend/redmi10x.png'],
			currentIndex: 0,
			user: {
				MZC: {
					person: {
						phoneNumber: 15092095518,
						headPortrait: '../../../static/img/user/man.png',
						userName: 'lemo',
						id: 1
					},
					dynamics: {
						content: '正在更新...',
						imgUrl:'../../../static/img/dynamics/111.png',
						label: '官方公告',
						browse: 112,
						comment: 58,
						fabulous: 101
					}
				},
				WS: {
					person: {
						phoneNumber: 13070848717,
						headPortrait: '../../../static/img/user/woman.png',
						userName: 'neoo',
						id: 2
					},
					dynamics: {
						content: '正在维护...',
						imgUrl:['../../../static/img/dynamics/111.png',
								'../../../static/img/dynamics/111.png',
								'../../../static/img/dynamics/111.png'],
						label: '官方公告',
						browse: 92,
						comment: 51,
						fabulous: 85
					}
				}
			},
			cFabulous: false,
			sFabulous: false,
			mores: 0
		}
	},
	methods: {
		changeCurrent(e) {
			this.currentIndex = e.detail.current;
		},
		clickFabulous1() {
			this.cFabulous = !this.cFabulous;
			if(this.cFabulous == true)
			{
				this.user.MZC.dynamics.fabulous ++;
			}else{
				this.user.MZC.dynamics.fabulous --;
			}
		},
		clickFabulous2() {
			this.sFabulous = !this.sFabulous;
			if(this.sFabulous == true)
			{
				this.user.WS.dynamics.fabulous ++;
			}else{
				this.user.WS.dynamics.fabulous --;
			}
		},
		clickMore(e) {
			if(this.mores == 0){
				this.mores = e;
			}else{
				this.mores = 0;
			}
		},
		clickFollow() {
			console.log("follow");
		}
	}
}
</script>

<style>
	swiper{
		height: 100%;
	}
	.recommend{
		background-color: #fff;
		height: 100%;
	}
	.swiper{
		height: 360rpx;
		margin-top: 20rpx;
		width: auto;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}
	.swiper-bg{
		width: 100%;
		height: 100%;
		background-size: 710rpx 360rpx;
		border-radius: 20rpx;
	}
	.indicator{
		width: 84rpx;
		height: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		right: 54rpx;
		margin-top: -56rpx;
	}
	.indicators{
		background-color: #5B5B5B;
		height: 16rpx;
		width: 16rpx;
		border-radius: 50%;
	}
	.indicatorsColor{
		background-color: #FE6440;
	}
	.dynamic{
		width: auto;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	.dynamics{
		/* height: 280px; */
		margin-top: 10rpx;
		border: 1px solid rgb(239,239,239,0.5);
		border-radius: 20rpx;
	}
	.dynamics-top{
		height: 90rpx;
		margin-left: 12rpx;
		margin-right: 12rpx;
		display: flex;
		justify-content: space-between;
	}
	.user{
		width: 275rpx;
		height: 90rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		position: absolute;
	}
	.more{
		position: relative;
		color: #9C9C9C;
		height: auto;
		width: 32rpx;
		margin: 40rpx 20rpx 20rpx 320px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
		.mores{
			background-color: #9C9C9C;
			height: 3px;
			width: 3px;
			border-radius: 50%;
		}
		.more-mores{
			background-color: #363636;
			position: absolute;
			width: 70px;
			right: 25px;
			top: -8px;
			border-radius: 5px;
		}
			.more-mores-span{
				height: 35px;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: 3px;
				font-size: 17px;
			}
			.iconright{
				position: absolute;
				right: -15.5px;
				font-size: 25px;
				top: 1px;
				color: #363636;
			}
	.head-portrait{
		height: 35px;
		width: 35px;
	}
	.head-portraits{
		height: 70rpx;
		width: 70rpx;
		border-radius: 50%;
	}
	.qita{
		margin-left: 20rpx;
	}
	.username{
		font-size: 15.5px;
		font-weight: 550;
		color: #FE6440;
	}
	.data{
		font-size: 12px;
		color: #9C9C9C;
	}
	.dynamic-content{
		margin: 10px 5px 0 5px;
	}
	.dynamic-contents{
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 4px;
	}
	.dynamic-contentImg{
		display: flex;
		flex-wrap: wrap;
	}
	.dynamic-contentImage1{
		margin-right: 5px;
		margin-top: 2px;
		height: 95px;
		width: 150px;
		border-radius: 5px;
	}
	.dynamic-contentImage2{
		margin-right: 5px;
		margin-top: 2px;
		height: 95px;
		width: 100px;
		border-radius: 5px;
	}
	.dynamic-contentLabel{
		display: flex;
		border-bottom: 1px solid rgb(239,239,239,0.5);
	}
	.dynamic-contentLabels{
		margin-right: 10px;
		margin-top: 5px;
		height: 24px;
		width: 80px;
		background-color: #FFEFEB;
		border-radius: 10px;
		font-size: 14px;
		color: #FE6440;
		font-weight: 550;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ctrl3{
		font-size: 13px;
	}
	.dynamic-bottom{
		height: 20px;
		margin: 5px 20px 0 5px;
		display: flex;
		justify-content: space-between;
	}
	.browse{
		width: 46px;
		height: 20px;
		display: flex;
		align-items: center;
	}
	.commentss{
		font-size: 13px;
		color: #9C9C9C;
		margin-left: 5px;
	}
	.comments{
		font-size: 13px;
		color: #9C9C9C;
		margin-left: 0.1px;
	}
	.dynamic-bottom-right{
		width: 110px;
		height: 20px;
		display: flex;
		justify-content: space-between;
	}
	.comment{
		width: 45px;
		display: flex;
		align-items: center;
	}
	.fabulous{
		width: 45px;
		display: flex;
		align-items: center;
	}
	.fabulousColor{
		color: #FE6440;
	}
	.iconzhengyanyanjing,.iconzan-copy{
		font-size: 21px;
		color: #9C9C9C;
	}
	.iconpinglun{
		font-size: 15px;
		font-weight: 600;
		color: #9C9C9C;
	}
</style>
